<template>
	<view class="model">
		<view class="type">
			<text v-for="(item,index) in tabData" :key="index" @click="change(item,index)"
				:class="currentIndex ==index?'bChange':''">
				{{item.name}}
			</text>
		</view>
		<view class="content">

			<view class="waterfall-page">
				<view class="waterfall-page-column" v-for="(item, index) in waterfall.columnList" :key="index"
					ref="column">
					<view class="waterfall-page-item" v-for="(pItem, pIndex) in item" :key="pIndex">
						<image class="waterfall-page-img" :src="pItem" mode="widthFix" @click="clickInfo(pItem)"></image>
					</view>
				</view>
			</view>

		</view>


	</view>
</template>

<script setup>
	import { ref, reactive } from 'vue';
	const {
		mourn,
		theme
	} = useStore()
	const {
		Theme,
		onShow
	} = useTheme()
	const {
		proxy
	} = getCurrentInstance()
	const tabData = ref([{
		name: '行业',
		value: 0
	}, {
		name: '餐饮',
		value: 0
	}, {
		name: '酒吧',
		value: 0
	}, {
		name: '商超',
		value: 0
	}, {
		name: '汽车连锁',
		value: 0
	}, {
		name: '美发',
		value: 0
	}, {
		name: '萌宠',
		value: 0
	}])
	const currentIndex = ref(-1)
	// 瀑布流信息
	const waterfall = reactive({
		// 图片列表
		imgList: [
			"https://img2.baidu.com/it/u=1893470775,4143435497&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
			"https://img0.baidu.com/it/u=1088754973,1390499664&fm=253&fmt=auto&app=138&f=JPEG?w=335&h=500",
			"https://img1.baidu.com/it/u=833730514,666835&fm=253&fmt=auto&app=138&f=JPEG?w=355&h=500",
			"https://img0.baidu.com/it/u=1088754973,1390499664&fm=253&fmt=auto&app=138&f=JPEG?w=335&h=500",
			"https://img1.baidu.com/it/u=3311811998,3185175032&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=625",
			"https://img0.baidu.com/it/u=3319997766,4089593231&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
			"https://img1.baidu.com/it/u=833730514,666835&fm=253&fmt=auto&app=138&f=JPEG?w=355&h=500",
			"https://img0.baidu.com/it/u=1088754973,1390499664&fm=253&fmt=auto&app=138&f=JPEG?w=335&h=500",
			"https://img1.baidu.com/it/u=3311811998,3185175032&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=625",
			"https://img0.baidu.com/it/u=3319997766,4089593231&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
		],
		columnList: [], // 每列图片
		columnHeight: [], // 每列图片高度
		columnCount: 2, // 总列数
	});

	onLoad(() => {
		initData()
	})
	const change = (item, index) => {
		currentIndex.value = index

	}

	function initData() {
		console.log(123)
		for (var i = 0; i < waterfall.columnCount; i++) {
			console.log(12345)
			waterfall.columnList.push([]);
			waterfall.columnHeight.push(0);
		}
		setWaterfallLayout()
	}
	// 设置瀑布流布局
	async function setWaterfallLayout() {
		for (var i = 0; i < waterfall.imgList.length; i++) {
			let item = waterfall.imgList[i];
			try {
				let imgInfo = await uni.getImageInfo({
						src: item,
					}),
					h = imgInfo.height;
				for (let j = 0; j < waterfall.columnCount - 1; j++) {
					let prevIndex = j,
						nextIndex = j + 1;
					if (
						waterfall.columnHeight[prevIndex] <= waterfall.columnHeight[nextIndex]
					) {
						waterfall.columnList[prevIndex].push(item);
						waterfall.columnHeight[prevIndex] += h;
					} else {
						waterfall.columnList[nextIndex].push(item);
						waterfall.columnHeight[nextIndex] += h;
					}
				}
			} catch (error) {
				console.log(error);
			}
		}
	}
	const clickInfo=(item)=>{
		console.log(item)
		// proxy.sjuNav.navigateTo('/my/modelInfo?url='+item)
		proxy.sjuNav.navigateTo('/my/modelInfo')
	}
</script>

<style lang="scss">
	.model {
		width: 100%;
		height: 100%;
		overflow-y: auto;
		padding: 10px;
		box-sizing: border-box;
		background: #fff;

		.type {
			display: flex;
			flex-direction: row;
			// justify-content: space-around;
			flex-wrap: wrap;

			text {
				width: 23%;
				height: 30px;
				margin: 10px 1%;
				line-height: 30px;
				text-align: center;
				background: #f5f5f5;
				border-radius: 5px;

			}

			.bChange {
				background-color: #0b0a34;
				color: #fff;
			}
		}

		.waterfall {
			display: flex;
			flex-wrap: wrap;

			// justify-content: space-between;
			.cell {
				width: 45%;
				// flex:0 0 50% ;
				padding: 10px;
				box-sizing: border-box;
			}

		}
	}

	.waterfall-page {
		display: flex;
		align-items: flex-start;

		.waterfall-page-column {
			box-sizing: border-box;
			flex: 1;
			padding: 0 10rpx;
			width: 0;

			.waterfall-page-item {
				margin-bottom: 10rpx;

				.waterfall-page-img {
					display: inline-block;
					width: 100%;
				}
			}
		}
	}
</style>